<template>
  <view class="userinfo-card">
    <view class="top">
      <image class="avatar" :src="avatar"></image>
      <view class="name">{{ personName }}</view>
    </view>
    <view class="middle">
      <view>{{ schoolInfo.schoolName }}</view>
      <view
        >{{ ztyClassInfo.classIndex }}年级 ({{
          ztyClassInfo.children[0].classIndex
        }}) 班</view
      >
    </view>
    <view class="bottom">
      <view
        >完成<span>{{ finishActivityNum }}</span
        >场活动</view
      >
      <view
        >共上传<span>{{ photoNum }}</span
        >张照片</view
      >
    </view>
  </view>
</template>

<script>
import { getInfo } from "@/api/modules/zty.js";
export default {
  name: "userinfoCard",
  props: {},
  data() {
    return {
      personName: "",
      avatar: "",
      schoolInfo: null,
      ztyClassInfo: null,
      finishActivityNum: 2,
      photoNum: 12,
    };
  },
  methods: {
    async getInfoFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
      };
      const res = await getInfo(params);
      if (res.code == 200) {
        this.personName = res.data.personName;
        this.avatar = res.data.photo;
        this.schoolInfo = res.data.school;
        this.ztyClassInfo = res.data.ztyClass;
      }
    },
  },
  created() {
    this.getInfoFn();
  },
};
</script>

<style lang="scss" scoped>
.userinfo-card {
  width: calc(100% - 32rpx);
  height: 224rpx;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 22rpx 28rpx;
  box-sizing: border-box;
  margin-bottom: 16rpx;
  .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18rpx;
    .avatar {
      width: 58rpx;
      height: 58rpx;
      border-radius: 50%;
      border: 3rpx solid #e3e3e3;
    }
    .name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
    }
  }
  .middle {
    margin-top: 24rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #888888;
  }
  .bottom {
    margin-top: 24rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
    span {
      color: #f75a3e;
      margin: 0 4rpx;
    }
  }
}
</style>
